<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spring MVC 拦截器与过滤器深度解析</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        /* 首字下沉效果 */
        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            margin-top: 0.5rem;
            font-weight: 700;
            color: #4f46e5;
            font-family: 'Noto Serif SC', serif;
        }
        
        /* 代码块美化 */
        pre {
            background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
            border-radius: 12px;
            padding: 1.5rem;
            overflow-x: auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            position: relative;
        }
        
        pre::before {
            content: attr(data-language);
            position: absolute;
            top: 0.5rem;
            right: 1rem;
            font-size: 0.75rem;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        
        code {
            color: #e2e8f0;
            font-family: 'Fira Code', monospace;
        }
        
        /* 卡片悬停效果 */
        .feature-card {
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        /* 标题装饰线 */
        .section-title::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
            margin-top: 1rem;
            border-radius: 2px;
        }
        
        /* 列表项美化 */
        .custom-list li {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 1rem;
        }
        
        .custom-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.5rem;
            width: 8px;
            height: 8px;
            background: #4f46e5;
            border-radius: 50%;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
        }
        
        /* 引用块样式 */
        .quote-block {
            border-left: 4px solid #4f46e5;
            background: linear-gradient(90deg, rgba(79, 70, 229, 0.05) 0%, transparent 100%);
            padding: 1.5rem 2rem;
            margin: 2rem 0;
            border-radius: 0 8px 8px 0;
        }
        
        /* 动画效果 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fadeInUp {
            animation: fadeInUp 0.8s ease-out;
        }
        
        /* 渐变文字 */
        .gradient-text {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
    </style>
</head>
<body>
    <!-- Hero 区域 -->
    <section class="relative overflow-hidden bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 text-white">
        <div class="absolute inset-0 bg-black opacity-20"></div>
        <div class="relative container mx-auto px-6 py-24">
            <div class="max-w-4xl mx-auto text-center animate-fadeInUp">
                <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
                    Spring MVC 
                    <span class="block text-3xl md:text-4xl mt-2 font-light">拦截器与过滤器深度解析</span>
                </h1>
                <p class="text-xl md:text-2xl font-light opacity-90 mb-8">
                    掌握请求处理链的核心机制，构建高效的 Web 应用架构
                </p>
                <div class="flex justify-center space-x-6 text-sm">
                    <span class="flex items-center">
                        <i class="fas fa-clock mr-2"></i>
                        阅读时间：8分钟
                    </span>
                    <span class="flex items-center">
                        <i class="fas fa-layer-group mr-2"></i>
                        深度：中级
                    </span>
                </div>
            </div>
        </div>
        <div class="absolute bottom-0 left-0 right-0">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 120L60 105C120 90 240 60 360 45C480 30 600 30 720 37.5C840 45 960 60 1080 67.5C1200 75 1320 75 1380 75L1440 75V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z" fill="white"/>
            </svg>
        </div>
    </section>

    <!-- 主要内容区域 -->
    <main class="container mx-auto px-6 py-12 max-w-6xl">
        <!-- 引言 -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-12 animate-fadeInUp">
            <p class="text-lg leading-relaxed text-gray-700 drop-cap">
                在 Spring MVC 中，HandlerInterceptor 和 Filter 都是用于请求处理流程中的重要组件，但它们有不同的作用和使用场景。理解它们的区别和应用场景，对于构建高效、可维护的 Web 应用至关重要。
            </p>
        </div>

        <!-- 架构概览图 -->
        <div class="bg-white rounded-2xl shadow-xl p-8 mb-12">
            <h2 class="text-3xl font-bold mb-6 gradient-text">请求处理架构概览</h2>
            <div class="mermaid">
                graph LR
                    A[客户端请求] --> B[Servlet容器]
                    B --> C[Filter链]
                    C --> D[DispatcherServlet]
                    D --> E[HandlerMapping]
                    E --> F[HandlerInterceptor链]
                    F --> G[Controller]
                    G --> H[HandlerInterceptor后处理]
                    H --> I[ViewResolver]
                    I --> J[View渲染]
                    J --> K[响应返回]
                    
                    style A fill:#f9f,stroke:#333,stroke-width:2px
                    style K fill:#9f9,stroke:#333,stroke-width:2px
                    style C fill:#bbf,stroke:#333,stroke-width:2px
                    style F fill:#fbf,stroke:#333,stroke-width:2px
            </div>
        </div>

        <!-- 核心区别对比 -->
        <section class="mb-16">
            <h2 class="text-4xl font-bold mb-8 text-center gradient-text">核心区别对比</h2>
            
            <div class="grid md:grid-cols-2 gap-8">
                <!-- HandlerInterceptor 卡片 -->
                <div class="feature-card rounded-2xl shadow-lg p-8">
                    <div class="flex items-center mb-6">
                        <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white text-2xl mr-4">
                            <i class="fas fa-layer-group"></i>
                        </div>
                        <h3 class="text-2xl font-bold">HandlerInterceptor</h3>
                    </div>
                    
                    <div class="space-y-6">
                        <div class="quote-block">
                            <p class="text-gray-700 italic">Spring MVC 特有的拦截机制，作用于控制器执行的生命周期内</p>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold text-lg mb-3 flex items-center">
                                <i class="fas fa-cogs mr-2 text-purple-500"></i>
                                主要功能
                            </h4>
                            <ul class="custom-list text-gray-700">
                                <li><strong>请求前处理：</strong>在控制器方法执行之前进行预处理，如权限检查、日志记录等</li>
                                <li><strong>请求后处理：</strong>在控制器方法执行后但在视图渲染之前进行处理</li>
                                <li><strong>视图渲染后处理：</strong>在视图渲染之后进行处理，如资源清理等</li>
                            </ul>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold text-lg mb-3 flex items-center">
                                <i class="fas fa-code mr-2 text-purple-500"></i>
                                核心方法
                            </h4>
                            <div class="bg-gray-50 rounded-lg p-4 space-y-2">
                                <code class="block text-sm text-gray-800">• preHandle() - 前置处理</code>
                                <code class="block text-sm text-gray-800">• postHandle() - 后置处理</code>
                                <code class="block text-sm text-gray-800">• afterCompletion() - 完成后处理</code>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Filter 卡片 -->
                <div class="feature-card rounded-2xl shadow-lg p-8">
                    <div class="flex items-center mb-6">
                        <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center text-white text-2xl mr-4">
                            <i class="fas fa-filter"></i>
                        </div>
                        <h3 class="text-2xl font-bold">Filter</h3>
                    </div>
                    
                    <div class="space-y-6">
                        <div class="quote-block">
                            <p class="text-gray-700 italic">Servlet 规范的一部分，作用于整个 Servlet 容器中</p>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold text-lg mb-3 flex items-center">
                                <i class="fas fa-cogs mr-2 text-blue-500"></i>
                                主要功能
                            </h4>
                            <ul class="custom-list text-gray-700">
                                <li><strong>请求预处理：</strong>在请求到达 Servlet 或 JSP 之前进行处理</li>
                                <li><strong>响应后处理：</strong>在响应离开 Servlet 之前进行处理</li>
                                <li><strong>通用处理：</strong>适用于所有类型的请求，不限于 Spring MVC</li>
                            </ul>
                        </div>
                        
                        <div>
                            <h4 class="font-semibold text-lg mb-3 flex items-center">
                                <i class="fas fa-code mr-2 text-blue-500"></i>
                                核心方法
                            </h4>
                            <div class="bg-gray-50 rounded-lg p-4 space-y-2">
                                <code class="block text-sm text-gray-800">• init() - 初始化</code>
                                <code class="block text-sm text-gray-800">• doFilter() - 过滤处理</code>
                                <code class="block text-sm text-gray-800">• destroy() - 销毁</code>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 实现指南 -->
        <section class="mb-16">
            <h2 class="text-4xl font-bold mb-8 section-title">实现自定义拦截器链</h2>
            
            <!-- HandlerInterceptor 实现 -->
            <div class="bg-white rounded-2xl shadow-xl p-8 mb-8">
                <h3 class="text-2xl font-bold mb-6 flex items-center">
                    <i class="fas fa-code-branch mr-3 text-purple-500"></i>
                    实现自定义 HandlerInterceptor
                </h3>
                